<?php
require_once("header.php");
require_once("model/DB.php");
require_once("model/Kid.php");
require_once("model/User.php");
require_once("model/Grade.php");
require_once("model/Kid.php");
require_once("function/admin.login.php");

$parents = User::getUser("type","parent");
$grades = Grade::getGrade();
$kids = Kid::getKid();
?>
<script>
function edit(id){
	var check_id = 0;
	var p_id = 0;
	$("#add_form").children().each(function(){
		if($(this).find('.age').attr("id")){
			var arr = $(this).find('.age').attr("id").split('_');
			p_id = arr[0];
		}
		if($(this).children().find('.id').val()==id)
		{	
			
			check_id++;
			
		}
		p_id++;
		
	});
	if(check_id>0){
		return false;
	}
	
			
	$.post
	(
		"function/getKid.php",
		{id:id},
		function(data){
			var div = $("#kid_form").clone(true);
			div.css("display","block");
			div.find(".age").attr("id",p_id+"_date");
			
				
			div.find(".name").val(data.name);
			div.find(".age").val(data.age);
			div.find(".parent").val(data.parent);
			div.find(".grade").children("select").val(data.grade);	
			div.find(".weight").val(data.weight);
			div.find(".height").val(data.height);
			div.find(".gender").val(data.gender);
			div.find(".nation").val(data.nation);
			var class_id = data.class;
			div.find(".id").val(id);
			$.post(
				"function/getClass.php",
				{grade:data.grade},
				function(data){
					if(data){
						div.find(".class").attr("disabled",false);
						div.find(".class").append($("<option></option>").attr("value","auto").text("Auto"));
						for(var i=0;i<data.length;i++){
							div.find(".class").append($("<option></option>").attr("value",data[i].id).text(data[i].title));
						}
						div.find(".class").val(class_id);
					}
					else{
						div.find(".class").attr("disabled",true);
					}
					div.appendTo($("#add_form"));
					$("#"+p_id+"_date").datepicker({
						showOn: 'button',
						buttonImage: 'images/calendar.gif',
						buttonImageOnly: true,
						dateFormat: 'yy-mm-dd'
					});	
				},
				"json"
			);					
			
		},
		"json"
	);


}

function del(id){
	if(confirm("Do you want to delete this row?")){
	$.post
	(
		"function/delKid.php",
		{id:id},
		function(data){
			if(data=="del"){
				$("#kid_list").load("pieces/kidlist.php");
				alert("Kid is deleted!");
				$("#add_form").children().each(function(i){
					if($(this).children().find('.id').val()==id)
					{	
						
						$(this).children().remove();						
					}
				});				
			}
		}
	);}
}

$(document).ready(function(){

	
	$("#kid_table").tablesorter( 
		{widthFixed: true, widgets: ['zebra']} 
	).tablesorterPager({container: $("#pager")});
	
	$("#add").click(function(){

	var p_id = 0;		
	$("#add_form").children().each(function(i){
		p_id++;
	});
	
		var div = $("#kid_form").clone(true);
		div.find("form").find(".age").attr("id",p_id+"_date");
		div.css("display","block");
		div.appendTo($("#add_form"));
		$("#"+p_id+"_date").datepicker({
			showOn: 'button',
			buttonImage: 'images/calendar.gif',
			buttonImageOnly: true,
			dateFormat: 'yy-mm-dd'
		});		
	});
	
	$(".cancel").click(function(){
		
		$(this).parents().each(function(i){
			if(i==4){
				$(this).remove();
			}
		});
	});	
	

	$(".grade").change(function(){
		
		var td = $(this).parent().next().find("select");
		td.html("");
		var loader = "<img src='images/loader.gif'>";
		var grade = $(this).find("select").val();
		if(!grade){
			td.attr("disabled",true);
			return false;
		}
		td.parent().append(loader);
		$(".loader").show();
		$.post(
			"function/getClass.php",
			{grade:grade},
			function(data){
				if(data){
					td.attr("disabled",false);
					td.append($("<option></option>").attr("value","auto").text("Auto"));
					for(var i=0;i<data.length;i++){
						td.append($("<option></option>").attr("value",data[i].id).text(data[i].title));
					}
				}
				else{
					td.attr("disabled",true);
				}
			
				td.parent().find('img').remove();
				
			},
			"json"
		);
	});
	
	$(".add_kid").submit(function(){
		form = $(this);
		var name = $(this).find(".name").val();
		var age = $(this).find(".age").val();
		var parent = $(this).find(".parent").val();
		var Class = $(this).find(".class").val();
		var weight = $(this).find(".weight").val();
		var height = $(this).find(".height").val();
		var id = $(this).find(".id").val();
		var grade = $(this).find(".grade").find("select").val();
		var gender = $(this).find(".gender").val();
		var nation = $(this).find(".nation").val();
		if(!name || !age || !parent || !Class){
			alert("Please complete the forms");
			return false;
		}
		
		$.post(
		 "function/addkid.php",
		 {name:name,age:age,parent:parent,Class:Class,weight:weight,height:height,id:id,grade:grade,gender:gender,nation:nation},
		 function(data){
			if(data){
				if(data=="added"){
					alert(name+" was added into database!");
					$("#kid_list").load("pieces/kidlist.php");
					form.remove();
				}
				else if(data=="saved"){
					alert(name+" was edited and saved into database!");
					$("#kid_list").load("pieces/kidlist.php");
					form.remove();
				}				
				else{
					alert("Error!");
				}
			}
			else{
				alert("Connection Error!");
			}
		 }
		);
		return false;
		
	});
});

</script>
<center>
<table id="admin_detail" cellspacing="0" cellpadding="0" >
<tr>
<td id="left_bar" style="border-right:1px solid black;text-align:center; width:100px;">

<br>
<a class="admin_left" href="admin.php">Home</a>
<br>
<br>
<a class="admin_left" href="javascript:void(0)" id="add">Add Kids</a>
</td>
<td>
<div id="kid_list">
<table id="kid_table" class="tablesorter">
	<thead>
		<tr><td>Name</td><td>Gender</td><td>Nationality</td><td>Age</td><td>Grade</td><td>Class</td><td>Parent</td><td>Action</td></tr>
	</thead>
	<tbody>
		<?php
		if($kids){
			
		
			
			foreach($kids as $kid){

				$kid['age'] = floor((time()-strtotime($kid['age']))/31536000);
				?>
				<tr><td><?php echo $kid['name']; ?></td><td><?php echo $kid['gender']; ?></td><td><?php echo $kid['nation']; ?></td><td><?php echo $kid['age']; ?></td><td><?php echo $kid['grade'] ?></td><td><?php echo $kid['class'] ?></td><td><?php echo $kid['username'] ?></td><td><a href="javascript:void(0)" class="edit" alt="edit" value="" onclick="edit(<?php echo $kid['id'] ?>)">edit</a> <a href="javascript:void(0)" alt="delete" onclick="del(<?php echo $kid['id'] ?>)">delete</a></td></tr>
				<?php 
			}
		}
		?>
	</tbody>
</table>


<div id="pager" class="pager" style="width:800px;margin-left:5px;margin-top:15px">
					<form>
						<img class="first" src="images/first.png"/>
						<img class="prev" src="images/prev.png"/>
						<input class="pagedisplay" type="text"/>
						<img class="next" src="images/next.png"/>
						<img class="last" src="images/last.png"/>
						<select id="pagesize" class="pagesize">
							 <option value="10" >10</option>
							 <option value="15" >15</option>
							 
						</select>
					</form>
</div>
</div>
<div id="kid_form" style="display:none">
<form class="add_kid">
<table>
	<tr>
		<td>*Student Name</td><td><input type="text" class="name"></td>
	</tr>
	<tr>
		<td>*Gender</td><td><select class="gender"><option value="male">Male</option><option value="female">Female</option></select></td>
	</tr>	
	<tr>
		<td>*Nationality</td><td><input type="text" class="nation"></td>
	</tr>	
	<tr>
		<td>*Birthday</td><td><input type="text" class="age" id="datepicker" readonly></td>
	</tr>
	<tr>
		<td>*Parent</td><td><select class="parent"><option value="">Select Parent</option><?php if($parents): foreach($parents as $parent): ?><option value="<?php echo $parent['id']; ?>"> <?php echo $parent['username']; ?>  </option><?php endforeach; endif; ?></select></td>
	</tr>
	<tr>
		<td>*Grade</td><td  class="grade"><select ><option value="">Select a Grade</option><?php if($grades): foreach($grades as $grade): ?><option value="<?php echo $grade['id']; ?>"> <?php echo $grade['title']; ?>  </option><?php endforeach; endif; ?></select></td>
	</tr>	
	<tr valign="bottom">
		<td>*Class</td><td valign="bottom"><select class="class" disabled></select></td>
	</tr>
	<tr>
		<td>Weight(kg)</td><td><input type="text" class="weight"></td>
	</tr>	
	<tr>
		<td>Height(cm)</td><td><input type="text" class="height"></td>
	</tr>	
	<tr>
		<td><input type="submit" value="Save"></td><td><input type="button" class="cancel" value="Cancel"></td>
		<input type="hidden" class="id" value="">
	</tr>
</table>
</form>
</div>
<div id="add_form">
</div>
</td>
</tr>
</table>
</center>